<template>
  <div id="app">
    <!-- <img alt="Vue logo" src="./assets/logo.png">
    <HelloWorld msg="Welcome to Your Vue.js App"/> -->

    <h1 v-text="msg" ref="title"></h1> <!--ref获取真实DOM元素-->
    <button ref="button" @click="showDom">输出DOM</button>
    <Navigator ref="navigator" /> <!--ref获取Navigator组件的实例对象vc-->

    <Header name="zhangsan" :age="18"></Header> <!--3.使用组件(标签,自闭合在非脚手架不可用)-->
    <!-- <Footer /> -->
    <!-- <Navigator /> -->

    <!-- <Footer v-on:selfEvent.once="showDemo"/> --> <!--1.自定义事件-->
    <!--<Footer ref="footer"/>--> <!--2.ref方式-->
    <Footer ref="footer" @click.native="show" /> <br /><!--3.原生事件-->

    <!---<Footer :todos="todos" /><hr />--> <!--全局事件总线-->

    <button @click="isShow = !isShow">显示/隐藏</button> <br />
    <transition name="donghua" :appear="true"> <!--过度或动画,appear一上来就动画,transition不被编译为标签-->
      <h1 v-show="isShow">动画</h1>
    </transition>
    <transition-group name="guodu" appear>
      <h1 v-show="!isShow" key="1">过度1</h1>
      <h1 v-show="isShow" key="2">过度2</h1>
    </transition-group>
    <transition-group name="animate" enter-active-class="animate__animated animate__swing"
      leave-active-class="animate__animated animate__backOutUp" appear>
      <h1 v-show="!isShow" key="1">第三方库过度</h1>
      <h1 v-show="isShow" key="2">第三方库过度2</h1>
    </transition-group>

    <button @click="getStudent">axios发送请求</button>
    <button @click="getStudents">vue-resource发送请求</button>
    <hr />

    <Footer title="美食">
      <img src="https://static.bmwax.cn/article/tools_fileNew.png" alt=""> <!--放入默认插槽-->
      <img slot="footer" src="https://static.bmwax.cn/article/tools_fileNew.png" alt=""> <!--放入具名插槽-->
      <template v-slot:footer> <!--放入具名插槽(新)-->
        具名插槽
      </template>
      <template scope="zidingyi"> <!--放入作用域插槽,必须template-->
        {{ zidingyi.games }}
      </template>
      <template slot-scope="{games}"> <!--放入作用域插槽(新),es6解构赋值-->
        {{ games }}
      </template>
    </Footer>

    <!--会编译成<a>标签,默认push可回退,改为replace替换不可回退-->
    <router-link replace to="/unclepath" class="item" active-class="active">路由跳转(去叔组件)</router-link><br />
    <router-link replace to="/fatherpath/childpath" class="item"
      active-class="active">嵌套路由(去子组件)</router-link><br /><!--嵌套路由(多级)-->
    <router-link :to="{ name: 'father' }">命名路由(去父组件)</router-link>
    <hr /> <!--命名路由(按名称跳转)-->

    <router-link
      :to="`/fatherpath/childpath/grandSonpath?id=${1}&title=${'孙子'}`">路由传参(query字符串)</router-link><br /><!--query字符串-->
    <router-link
      :to="{ path: '/fatherpath/childpath/grandSonpath', query: { id: 1, title: '孙子' } }">路由传参(query对象)</router-link><br /><!--query对象-->
    <router-link :to="`/fatherpath/childpath/grandSonpath/${1}/${'孙子'}`">路由传参(params字符串)</router-link><br />
    <!--params字符串(路由规则加params占位符)-->
    <router-link :to="{ name: 'grandSon', params: { id: 1, title: '孙子' } }">路由传参(params对象)</router-link>
    <!--params对象(必须按name跳转)-->

    <!--视图呈现(跳转哪个组件就显示哪个组件)-->
    <router-view></router-view>
  </div>
</template>

<script>
import pubsub from 'pubsub-js' //引入pubsub对象(消息订阅与发布,第三方库放上面)
import 'animate.css' //引入第三方库过度
import axios from 'axios' //引入axios发送请求
// import HelloWorld from './components/HelloWorld.vue'
import Header from './components/Header.vue'  //1.引入组件
import Footer from './components/Footer.vue'
import Navigator from './components/Navigator.vue'
export default {
  name: 'App',
  components: {
    // HelloWorld
    Header, //2.注册组件
    Footer,
    Navigator,
  },
  data() {
    return { //数据
      msg: '',
      todos: [],
      isShow: true
    }
  },
  methods: { //方法
    showDom() {
      console.log(this.$refs.title)
      console.log(this.$refs.button)
      console.log(this.$refs.navigator)
    },
    showDemo(name, ...params) {
      console.log('自定义事件', name, params)
    },
    show() {
      alert(123)
    },
    checkTodo(id) { //爷接收孙
      console.log(id)
    },
    getStudent() {
      //axios.get(`http://localhost:8080/api/students?q=${this.keyWord}`).then( //vue.config.js配置代理在本机,即axios8080->代理5000->后端5000
      axios.get(`https://dog.ceo/api/breed/pembroke/images/random`).then(
        response => {
          let data = response.data
          console.log(data)
        },
        error => {
          console.log(error.mssage)
        }
      )
    },
    getStudents() {
      //this.$http.get(`http://localhost:8080/api/students?q=${this.keyWord}`).then(
      this.$http.get(`https://dog.ceo/api/breed/pembroke/images/random`).then(
        response => {
          let data = response.data
          console.log(data)
        },
        error => {
          console.log(error.mssage)
        }
      )
    }
  },
  mounted() {
    this.$refs.footer.$on('selfEvent', this.showDemo) //自定义事件
    this.$bus.$on('checkTodo', this.checkTodo) //绑定(全局事件总线)
    this.pubId = pubsub.subscribe('msgName', (msgName, data) => { //消费者订阅(回调,箭头函数this往外找为vc, msgName不使用时可用_占位)
      console.log(msgName, data)
    })
  },
  beforeDestroy() {
    this.$bus.$off('checkTodo') //解绑(全局事件总线)
    pubsub.unsubscribe(this.pubId) //取消订阅
  }
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}

h1 {
  background-color: orange;
}

.donghua-enter-active {
  animation: atguigu 0.5s linear
}

.donghua-leave-active {
  animation: atguigu 0.5s linear reverse
}

@keyframes atguigu {
  from {
    transform: translateX(-100%)
  }

  to {
    transform: translateX(0px)
  }
}

.guodu-enter,
.guodu-leave-to {
  transform: translateX(-100%)
}

.guodu-enter-active,
.guodu-leave-active {
  transition: 0.5s linear
}

.guodu-enter-to,
.guodu-leave {
  transition: translateX(0)
}
</style>
